import React, { Component } from 'react';
import {connect} from 'react-redux'

import {
    Form,
    Input,
    InputNumber,
    Cascader,
    Select,
    Row,
    Col,
    Checkbox,
    Button,
    AutoComplete,
    message,
    Modal,
    Popover,
    Spin
  } from 'antd';
  
//  引入自定义操作
import { ChangeSpinACtivate } from '../../redux/actions/public';
import { WithdrawSaga } from '../../redux/actions/aboutMoney';

  const { Option } = Select;

  // 类似样式，调节方框的距离
  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 6,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 16,
      },
    },
  };
  const tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 8,
      },
    },
  };
  
// 提现表单
class WithdrawForm extends React.Component {

    // 点击提现
    onFinish = (values) => {
        const { ChangeSpinACtivate, baseUserInfoState, WithdrawSaga } = this.props
        values.email = baseUserInfoState.email
        values.username = baseUserInfoState.username
        WithdrawSaga(values)
        console.log(11111, values)
    }

    render () {
        const { baseUserInfoState, SpinState } = this.props
        return (
            <Form
                {...formItemLayout}
                name="register"
                onFinish={this.onFinish}
                scrollToFirstError
            >
                {/* 1、当前金额 */}
                <Form.Item
                    name="money"
                    label="当前金币"
                    initialValue={baseUserInfoState.money}
                >
                    <Input bordered={false} disabled={true} style={{"color": "red"}} />
                </Form.Item>
                {/* 2、银行卡账号 */}
                <Form.Item
                    name="bankCardNum"
                    label="银行卡号"
                    rules={[
                        {
                        required: true,
                        message: '请输入您的银行卡号!',
                        },
                        {
                        max: 100,
                        message: '您输入的银行卡号过长',
                        },
                    ]}
                >
                    <Input  />
                </Form.Item>
            
                {/* 3、密码（登录密码） */}
                <Form.Item
                    name="password"
                    label="支付密码"
                    rules={[
                        {
                        required: true,
                        message: '请输入您的密码!',
                        },
                        {
                        max: 200,
                        message: '您输入的密码过长，请限定在200个字符',
                        },
                    ]}
                    >
                        <Input.Password />
                </Form.Item>
                {/* 4、要提现的金额 */} 
                <Form.Item
                    name="withdraw_money"
                    label="提现金额"
                    rules={[
                        {
                            required: true,
                            message: '请输入您提现金额，必须为整百!',
                          },
                          // 自定义限制规则,必须小于现有的金额
                          () => ({
                              validator(_, value) {
                                  if (value > baseUserInfoState.money) {
                                      return Promise.reject(new Error('您在系统上只有'+baseUserInfoState.money+'枚金币!'));
                                  }
                                  return Promise.resolve();
                              }
                          }),
                        //  自定义限制规则，必须为整百
                          () => ({
                              validator(_, value){
                                  if (value % 100 != 0) {
                                      return Promise.reject(new Error('您提现的金额必须为整百'))
                                  }
                                  return Promise.resolve()
                              }
                          }),
                    ]}
                    >
                        <InputNumber
                            style={{ width: 150 }}  
                            min={0}
                            precision={0}
                        />
                </Form.Item>
                <Spin spinning={ SpinState.sendTask_activate } tip="金额提现中......">
                    <Form.Item {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit">
                            提现
                        </Button>
                    </Form.Item>
                </Spin>
            </Form>
        )
    }
}

export default connect (
    state => ({
        baseUserInfoState: state.PublicReducer.baseUserInfo,
        SpinState: state.PublicReducer.spinState,
    }),
    {
        ChangeSpinACtivate,
        WithdrawSaga
    }
)(WithdrawForm)
